src/Payments.Mvc/ClientApp/src/components/payInvoiceAction.tsx (2)

77-77: Inline style alignContent: 'center' may have no effect.

The alignContent CSS property only works on multi-line flex containers or grid containers. Without display: flex on this div, the style does nothing.

♻️ Suggested fix

-        <div style={{ alignContent: 'center' }}>
+        <div style={{ display: 'flex', justifyContent: 'center' }}>

Or better, use a CSS class consistent with the rest of the styling approach.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/Payments.Mvc/ClientApp/src/components/payInvoiceAction.tsx` at line 77,
The inline style alignContent: 'center' on the div in the payInvoiceAction
component is ineffective because the div is not a multi-line flex or grid
container; either remove alignContent or make the div a flex/grid container and
use the correct alignment properties (e.g., display: 'flex' with
justifyContent/alignItems) or, preferably, replace the inline style with a CSS
class consistent with the project's styling conventions; update the JSX div (the
one currently using style={{ alignContent: 'center' }}) to use the chosen
approach.

---

14-106: Consider using a functional component.

This component has no state or lifecycle methods, making it a good candidate for a functional component, which is more concise and aligns with modern React patterns. However, if the codebase convention is to use class components, this is fine as-is.

♻️ Optional: Functional component alternative

import * as React from 'react';
import { formatCurrencyLocale } from '../utils/currency';

interface IProps {
  dueDate: string | null;
  errorMessage: string;
  isSaving: boolean;
  isValid: boolean;
  isValidating: boolean;
  onSubmit: () => void;
  total: number;
}

const PayInvoiceAction: React.FC<IProps> = ({
  dueDate,
  errorMessage,
  isSaving,
  isValid,
  isValidating,
  onSubmit,
  total
}) => {
  return (
    <div className='pay-action'>
      {/* ... same JSX ... */}
    </div>
  );
};

export default PayInvoiceAction;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/Payments.Mvc/ClientApp/src/components/payInvoiceAction.tsx` around lines
14 - 106, The PayInvoiceAction class component has no state or lifecycle methods
so convert it to a functional component: replace "export default class
PayInvoiceAction extends React.Component<IProps> { public render() { ... } }"
with "const PayInvoiceAction: React.FC<IProps> = ({ dueDate, errorMessage,
isSaving, isValid, isValidating, onSubmit, total }) => { return ( ... ); }
export default PayInvoiceAction;" — keep the existing JSX exactly as-is, keep
the IProps interface and imports (React, formatCurrencyLocale), remove the
render method and class boilerplate, and ensure button onClick, disabled logic
and all prop names (dueDate, errorMessage, isSaving, isValid, isValidating,
onSubmit, total) remain unchanged.

src/Payments.Mvc/ClientApp/src/containers/PayInvoiceContainer.tsx (1)

148-199: Potential redundant UI when invoice is paid.

When invoice.paid is true, canEdit will be false (status won't be 'Sent'), so both the !canEdit block (lines 150-181) and the invoice.paid block (lines 183-197) render. This shows the total twice and displays both a status badge and the "Invoice Paid" confirmation.

Consider refining the conditions to avoid redundancy:

♻️ Suggested condition refinement

-          {(!canEdit || invoice.paid) && (
+          {!canEdit && (
             <div className='pay-action'>
-              {!canEdit && (
+              {!invoice.paid && (
                 <>
                   <span className='pay-action-total'>
                     {formatCurrencyLocale(invoice.total)}
                   </span>

This would show the status info only for non-editable, non-paid invoices, avoiding duplication with the paid confirmation block.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/Payments.Mvc/ClientApp/src/containers/PayInvoiceContainer.tsx` around
lines 148 - 199, The UI currently renders both the !canEdit block and the
invoice.paid block when an invoice is paid, causing duplicated information;
update the rendering conditions so the status/total section (the JSX guarded by
!canEdit) only shows for non-editable AND not-paid invoices (i.e., add
invoice.paid === false to that condition), leaving the invoice.paid block (the
"Invoice Paid" and paidDate display) to render only when invoice.paid is true;
adjust the conditional around the status/total alerts (references: canEdit,
invoice.paid, invoice.status, formatCurrencyLocale) so paid invoices don’t also
show the non-paid status UI.